<template>
  <div class="login-security-page">
    <call-back />
    <el-card shadow="never">
      <!-- 页面标题 -->
      <h2 class="page-title">登录和安全</h2>

      <!-- 头像部分 -->
      <div class="avatar-section">
        <div class="avatar-wrapper">
          <el-avatar
            :size="80"
            :src="user.avatar || 'https://api.multiavatar.com/Munger.svg'"
            alt="User Avatar"
          />
          <span class="avatar-caption">修改头像</span>
        </div>
      </div>

      <el-divider />

      <!-- 设置项列表（直接使用用户对象渲染） -->
      <div class="settings-list">
        <!-- 姓名 -->
        <div class="setting-item">
          <div class="info">
            <div class="label">您的姓名</div>
            <div class="value">{{ user.nickname || user.username }}</div>
          </div>
          <el-button class="edit-btn" @click="showEditNickname = true">编辑</el-button>
        </div>
        <el-divider />

        <!-- 手机号 -->
        <div class="setting-item">
          <div class="info">
            <div class="label">手机号</div>
            <div class="value">{{ user.mobile || '未绑定手机号' }}</div>
          </div>
          <el-button class="edit-btn" @click="showEditMobile = true">编辑</el-button>
        </div>
        <el-divider />

        <!-- 邮箱 -->
        <div class="setting-item">
          <div class="info">
            <div class="label">邮箱</div>
            <div class="value">{{ user.email || '' }}</div>
          </div>
          <el-button class="edit-btn" @click="showEditEmail = true">编辑</el-button>
        </div>
        <el-divider />

        <!-- 密码 -->
        <div class="setting-item">
          <div class="info">
            <div class="label">密码</div>
            <div class="value">********</div>
          </div>
          <el-button class="edit-btn" @click="showChangePasswordDialog">编辑</el-button>
        </div>
      </div>
    </el-card>
     <!-- 昵称编辑弹窗 -->
      <EditableItem
        v-model="showEditNickname"
        title="修改昵称"
        label="输入新昵称"
        :initial-value="user.nickname"
        @submit="handleNicknameSubmit"
      />

      <!-- 手机号编辑弹窗 -->
      <EditableItem
        v-model="showEditMobile"
        title="修改手机号"
        label="输入新手机号"
        :initial-value="user.mobile"
        @submit="handleMobileSubmit"
      />

      <!-- 邮箱编辑弹窗 -->
      <EditableItem
        v-model="showEditEmail"
        title="修改邮箱"
        label="输入新邮箱"
        :initial-value="user.email"
        @submit="handleEmailSubmit"
      />
      <ChangePassword ref="changePasswordRef" />

  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue' // 新增ref用于存储用户对象
import * as UserApi from '@/api/system/user'
import type { UserVO } from '@/api/system/user'
import EditableItem from './EditableItem.vue'
import CallBack from '@/components/callback/index.vue'
import ChangePassword from './ChangePassword.vue'

const user = ref<UserVO>({
  id: 0,
  username: '',
  nickname: '',
  deptId: 0,
  postIds: [],
  email: '',
  mobile: '',
  sex: 0,
  avatar: '',
  loginIp: '',
  status: 0,
  remark: '',
  loginDate: new Date(),
  createTime: new Date()
}) // 存储用户信息的响应式对象

const showEditNickname = ref(false);
const showEditMobile = ref(false);
const showEditEmail = ref(false);

const changePasswordRef = ref<InstanceType<typeof ChangePassword> | null>(null);


  const showChangePasswordDialog = () => {
  changePasswordRef.value?.openDialog();
};

// 处理昵称提交
const handleNicknameSubmit = async (newNickname: string) => {
  try {
    await UserApi.updateNickName(newNickname);  // 调用更新昵称API
    user.value.nickname = newNickname;  // 更新本地用户信息
    showEditNickname.value = false;  // 关闭弹窗
    ElMessage.success('昵称修改成功');
  } catch (err) {
    ElMessage.error('昵称修改失败');
  }
};

// 处理手机号提交
const handleMobileSubmit = async (newMobile: string) => {
  try {
    await UserApi.updateMobile(newMobile);  // 调用更新手机号API
    const userInfoStr = localStorage.getItem('userInfo')
  const userInfo = userInfoStr ? JSON.parse(userInfoStr) : null
  if (userInfo?.id) {
    const res = await UserApi.getUserSelf() // 获取用户信息
    user.value = res // 直接存储完整用户对象
  }
    showEditMobile.value = false;  // 关闭弹窗
    ElMessage.success('手机号修改成功');
  } catch (err) {
    ElMessage.error('手机号修改失败');
  }
};

// 处理邮箱提交
const handleEmailSubmit = async (newEmail: string) => {
  try {
    await UserApi.updateEmail(newEmail);  // 调用更新邮箱API
    const userInfoStr = localStorage.getItem('userInfo')
  const userInfo = userInfoStr ? JSON.parse(userInfoStr) : null
  if (userInfo?.id) {
    const res = await UserApi.getUserSelf() // 获取用户信息
    user.value = res // 直接存储完整用户对象
  }
    showEditEmail.value = false;  // 关闭弹窗
    ElMessage.success('邮箱修改成功');
  } catch (err) {
    ElMessage.error('邮箱修改失败');
  }
};
onMounted(async () => {
  const userInfoStr = localStorage.getItem('userInfo')
  const userInfo = userInfoStr ? JSON.parse(userInfoStr) : null
  if (userInfo?.id) {
    const res = await UserApi.getUserSelf() // 获取用户信息
    user.value = res // 直接存储完整用户对象
  }
})
</script>

<style scoped lang="less">
/* 整个页面容器 */
.login-security-page {
  position: relative;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  background-color: #f7f8fa;
}

/* 使用 el-card 替代简单的 div，并移除默认边框 */
.el-card {
  border: none;
}

/* 页面主标题 */
.page-title {
  font-size: 22px;
  font-weight: 600;
  color: #1f2329;
  margin: 0 0 24px 0;
}

/* 头像区域 */
.avatar-section {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 20px 0;
  text-align: center;
}

.avatar-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar-caption {
  margin-top: 12px;
  font-size: 14px;
  color: #585a5d;
  cursor: pointer;
}

/* 定位头像区域的徽章 */
.avatar-badge {
  /* 通过 transform 微调徽章位置，使其更贴近图片效果 */
  transform: translateX(8px);
}

/* 设置项列表 */
.settings-list {
  margin-top: 10px;
}

/* 单个设置项 */
.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
}

/* 左侧信息容器 */
.info .label {
  font-size: 14px;
  color: #585a5d;
  margin-bottom: 8px;
}

.info .value {
  font-size: 16px;
  color: #1f2329;
  font-weight: 500;
}

/* 自定义编辑按钮样式 */
.edit-btn {
  background-color: #a0d911; /* 鲜绿色 */
  border-color: #a0d911;
  color: #ffffff;
  font-weight: 500;
  border-radius: 6px;
}

.edit-btn:hover,
.edit-btn:focus {
  background-color: #b7eb59;
  border-color: #b7eb59;
  color: #ffffff;
}

/* 调整 Element Plus 默认的分割线边距 */
.el-divider--horizontal {
  margin: 0;
}
</style>
